<!doctype html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="js/canvasBarrage.js"></script>
    <title>弹幕demo</title>
    <style>
        .canvas-barrage {
            position: absolute;
            width: 960px;
            height: 540px;
            pointer-events: none;
            z-index: 1;
        }

        .ui-input {
            width: 856px;
            height: 20px;
            line-height: 20px;
            border: 1px solid #d0d0d5;
            border-radius: 4px;
            padding: 9px 8px;
        }

        .ui-button {
            display: inline-block;
            background-color: #2486ff;
            line-height: 28px;
            text-align: center;
            border-radius: 4px;
            color: #fff;
            font-size: 14px;
        }
    </style>
</head>
<body>
<canvas id="canvasBarrage" class="canvas-barrage"></canvas>
<video id="videoBarrage" width="960" height="540" src="video/video.mp4" controls></video>
<p>
    <input class="ui-input" id="msg" name="value" value="发送弹幕" type="text" required>
    <input class="ui-button" id="sendBtn" value="发送弹幕" type="button">
</p>
</body>
</html>

<script>
    if ("WebSocket" in window) {
        //弹幕数据
        var dataBarrage = [{
            value: '',
            time: 0,  // 单位为秒
            speed: 0,
            fontsize: 0
        }];
        var itemsColor = [
            '#FFA54F',
            '#FF4040',
            '#EE1289',
            '#8E8E38',
            '#3A5FCD',
            '#00EE76',
            '#388E8E',
            '#76EEC6',
            '#87CEFF',
            '#7FFFD4'
        ];
        var eleCanves = document.getElementById('canvasBarrage');
        var eleVideo = document.getElementById('videoBarrage');

        var barrage = new CanvasBarrage(eleCanves, eleVideo, {
            data: dataBarrage
        });


        var weServer = 'ws://192.168.1.39:9501';
        var ws = new WebSocket(weServer);

        ws.onopen = function (evt) {
            ws.readyState
            if (ws.readyState == 1) {
                console.log(('WebSocket 连接成功'));
            } else {
                console.log(('WebSocket 连接失败'));
            }
        };

        ws.onmessage = function (evt) {

            barrage.add({
                value: evt.data,
                time: eleVideo.currentTime,
                speed: 5,
                color: itemsColor[Math.floor(Math.random() * itemsColor.length)]
            });

            console.log('Retrieved data from server :' + evt.data);
        };

        ws.onerror = function (evt) {
            alert('WebSocket  发生错误');
            console.log(evt);
        };

        ws.onclose = function () {
            alert('WebSocket  连接关闭');
            console.log('WebSocket  连接关闭 ...')
        };

        var msg;
        var sendBtn = document.getElementById('sendBtn');
        sendBtn.onclick = function () {
            if (ws.readyState == 1) {
                msg = document.getElementById('msg').value;
                ws.send(msg);
            } else {
                alert('WebSocket  连接失败');
            }
        };
    } else {
        alert('您的浏览器不支持 WebSocket');
    }
</script>
